<template>
	<view>
		<view class="bg-container bg-style" :style="'background-image:url('+IMG_URL+'cart-bg.png)'">
			<view class="bg-content" :style="'height:'+CustomBar+'px;padding-top:'+StatusBar+'px;display:flex;'">
				<view class='back' @tap="handleClickBackPage">
				   <image :src="IMG_URL+'back-icon1.png'" class="back-image " ></image>
				</view>
				<view class="bg-text" :style="'height:'+(CustomBar-StatusBar)+'px;line-height:'+(CustomBar-StatusBar)+'px'">
					<text>我的预算</text>  
				</view>
			</view>
		</view>
		<scroll-view class="list-scroll" scroll-y @scrolltolower='handleScrollBottomGetMoreListInfo' :style="'top:'+CustomBar+'px;'">
			<view class="goods-container">
			   <view class='box-goods-container' v-for='(cart,cart_index) in cart_list' v-for-item="cart" v-for-index="cart_index">
					 <view class="list-title"> 
						<image :src="IMG_URL_MXH + 'cart-icon1.png'" class='shop-image'></image>
						<text class="shop-name">{{cart.name}}</text>
						<image :src="IMG_URL_MXH + 'youjiantou2.png'" class='shop-jiantou'></image>
					 </view>
					 <view class="goods-list-content" v-key="item.id" @tap='handleClickChangeGoodsCheck' :data-id="item.id" v-for='(item,index) in cart.list' v-for-item='item'>
						 <view class="goods-list" :class="item.isTouchMove ? 'touch-move-active' : ''" @touchStart="touchstart" @touchMove="touchmove" :data-id="item.cart_id" :data-index="cart_index">
							 <checkbox-group :data-index='index'    data-mch-index="0" data-type="self" class='flex-between'>
								 <view @tap="cartCheck" :data-cart_index='cart_index' :data-index='index' data-mch-index="0" data-type="self" class='flex-between'>
								   <label v-if="item.checked==true" >
									 <checkbox :value="item.id" checked class="all-checkbox" />
								   </label>
						 
									<label v-else>
									 <checkbox :value="item.id"  class="all-checkbox" />
								   </label>
								 </view>
								 
								 <view class="goods-content flex-between">
									 <view class="list-image flex-center">
									   <image :src='item.goods_pic' mode="aspectFit"></image>
									 </view>
									 <view class="goods-detail col-between">
									   <view class="goods-title text-sl">{{item.goods_name}}</view>
									   <view class="goods-text nowrap" v-for="(attr,index) in item.attr_list" v-for-item="attr" v-key="item.id">{{attr.attr_group_name}}:{{attr.attr_name}}</view>
									   <view class="goods-price flex-between">
											 <view class="price-left">
											   <text>￥</text>
											   <text>{{item.unitPrice}}</text>
											 </view>
											 <view class="price-right">
											   <!-- <van-stepper :value="item.num" integer='true' :max='10000' min='1' @change="handleChangeGoodsBuyNum" :data-id='item.id' minus-class='reduce-btn' plus-class='add-btn' input-class='num-text' @plus="cartAdd" @minus="cartLess" :id="item.cart_id" :data-mch_index="cart_index" :data-index="index"/> -->
											 </view>
									   </view>
									 </view>
								   </view>
								   
							</checkbox-group>
					     </view>
						 
						 <view class="del-btn flex-center" @tap="cartDelete" :data-id="item.cart_id" :data-index="cart_index">
							 <image :src="IMG_URL+'del-icon.png'"></image>
						 </view>
					 </view>
					     <!-- 没有数据 -->
					     <no-data v-if="!cart_list.length&&!mch_list.length&&!loading"></no-data>
				</view>
			</view>
			<view class="total-container flex-between">
				<view class="total-check flex">
					<checkbox-group @tap="cartCheckAll">
					  <label class="all-lable flex">
						<checkbox value="all" v-if="cart_check_all==true?'check-icon1.png':'check-icon2.png'" />
						<text>全选</text>
					  </label>
					</checkbox-group>
					 <view class="total-price">
						<text>总  计：</text>
						<text>￥</text>
						<text>{{total_price}}</text>
					  </view>
				</view>
				<button class="submit-btn flex-center" hover-class="button-hc" @tap="cartGyzjSubmit">
					<text>提交预算</text>
				  <text :class="totalNum.length>1?'max-num':''">{{totalNum}}</text>
				</button>
					
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	// import uniRate from '@/components/uni-rate/uni-rate.vue'
	var t = require("@/api.js"), a = getApp(), me = require("@/utils/method.js");
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		data(){
			return{
				IMG_URL:'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/',
				IMG_URL_MXH:'http://try11.jiaodaoren.com/zhusiyao/meixihujiancaicheng/',
				    // CustomBar: app.globalData.CustomBar, //顶部栏高度
					CustomBar: statusBarHeight, //顶部栏高度
				    StatusBar: app.globalData.StatusBar, //顶部padding
				    cartList: [{
				      id: 1,
				      isTouchMove: false,
				      // img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image1.png',
				      img: 'https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1584926108&t=1be4bdd33871946b1fdfc1e2680b5154',
				      title: '本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '122.33',
				      quantity: 2,
				      buy_max_quantity: 10,
				      selected: true,
				    }, {
				      id: 2,
				      isTouchMove: false,
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image2.png',
				      title: '本博肩颈椎222按摩器颈qewqeqwe功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '12.33',
				      quantity: 3,
				      buy_max_quantity: 12,
				      selected: true,
				    }, {
				      id: 3,
				      isTouchMove: false,
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image3.png',
				      title: '本博肩adasdasad部腰部肩部多功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '33433.33',
				      quantity: 4,
				      buy_max_quantity: 10,
				      selected: true,
				    }, {
				      id: 4,
				      isTouchMove: false,
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image4.png',
				      title: '本博肩颈椎按摩器asd多功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '2.33',
				      quantity: 5,
				      buy_max_quantity: 10,
				      selected: true,
				    }, {
				      id: 4,
				      isTouchMove: false,
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image4.png',
				      title: '本博肩颈椎按摩器asd多功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '2.33',
				      quantity: 5,
				      buy_max_quantity: 10,
				      selected: true,
				    }, {
				      id: 4,
				      isTouchMove: false,
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-image4.png',
				      title: '本博肩颈椎按摩器asd多功能腰椎全身电动本博肩颈椎按摩器颈部腰部肩部多功能腰椎全身电动',
				      spec: '规格：享梦套餐1',
				      sell_price: '2.33',
				      quantity: 5,
				      buy_max_quantity: 10,
				      selected: true,
				    }], //商品列表
				    idList: [], //当前选中状态的商品ID列表
				    totalNum: 0, //商品总数——参数格式为字符串不然有个样式会有问题
				    checkAll: true, //是否全选
				
				
				    /*购物车需要用到的东西 */
				    total_price: 0,
				    cart_check_all: !1,
				    cart_list: [],
				    mch_list: [],
				    loading: !0,
				    check_all_self: !1
			}
		},
		onLoad:function(options){
			 const url = 'http://aliyun.oss.zxgyzj.com/video/02.mp3'
			 gyzjModel.prototype.musicPlay(url)
		},
		onHide: function (options) {
		    gyzjModel.prototype.musicPause();
		},   
		onShow:function(){
			var t = this;
			t.cart_check_all=!1;
			  t.show_cart_edit= !1;
			  t.check_all_self= !1;
			  t.getCartList();
		},
		methods:{
			updateTotalPrice: function () {
			    var t = this, a = 0, i = t.cart_list, number = 0;
			    // for (var c in i) i[c].checked && (a += i[c].price, number += 1);
			    // for (var c in t.mch_list) for (var e in t.mch_list[c].list) t.mch_list[c].list[e].checked && (a += t.mch_list[c].list[e].price, number += 1);
			
			    for (var c in t.cart_list) for (var e in t.cart_list[c].list) t.cart_list[c].list[e].checked && (a += t.cart_list[c].list[e].price, number += 1);
			    t.total_price= a.toFixed(2);
			    t.totalNum= number;
			  },
			 cartCheck: function (t) {
			    console.log('单选按钮', t); 
			    var a = this, i = t.currentTarget.dataset.index, car_i=t.currentTarget.dataset.cart_index,c = t.currentTarget.dataset.type, e = t.currentTarget.dataset.mchIndex;
			    var cart_list=a.cart_list; 
			    //需要参考
				console.log('car_i',car_i);
				console.log("cart_list[car_i]['list']",cart_list[car_i]['list']); 
			    if("self"==c){ 
			      cart_list[car_i]['list'][i].checked = !cart_list[car_i]['list'][i].checked, 
				  a.cart_list=cart_list;
			    }
			     
			      a.mch_list= a.mch_list; 
				   a.updateTotalPrice();
			    
			  }, 
			//改变商品选中状态
			  handleClickChangeGoodsCheck(e) {
			    let self = this
			    let checked = e.currentTarget.dataset.checked
			    let id = e.currentTarget.dataset.id
			    let idList = []
			    this.cartList.forEach((item, index) => {
			      if (item.id == id) {
			        item.selected = !item.selected
			      }
			      if (item.selected != false) {
			        idList.push(item.id);
			      }
			    })
			
			    this.cartList= this.cartList;
			    this.idList=idList;
			    this.checkAll=this.cartList.length === idList.length ? true : false;
			  },
			cartCheckAll: function () {
			    var t = this, a = t.cart_list, i = !1;
			    i = !t.cart_check_all;
			    // for (var c in a) a[c].disabled && !t.show_cart_edit || (a[c].checked = i);
			    if (t.cart_list && t.cart_list.length) for (var c in t.cart_list) for (var e in t.cart_list[c].list) t.cart_list[c].list[e].checked = i;
			    t.cart_check_all= i;
			
			      // cart_list: a,
			      // mch_list: t.data.mch_list
			    t.cart_list=t.cart_list;
				t.updateTotalPrice();
			  },
			  //滚动触底，获取更多列表数据
			  handleScrollBottomGetMoreListInfo() {
			    console.log(1)
			  },
			  cartGyzjSubmit:function(){
			      var ta = this, i = ta.cart_list, c = [], e = [];
				  var arr = this.main_getGlobal(); 
			      for (var s in i) {
			        var r = [];
			        if (i[s].list && i[s].list.length) for (var l in i[s].list) i[s].list[l].checked && r.push(i[s].list[l].cart_id);
			        r.length && e.push({
			          id: i[s].id,
			          cart_id_list: r
			        });
			      }
			      var rr=[];
			      for(var rs in e){
			        for (var bb in e[rs]['cart_id_list']){
			          rr.push(e[rs]['cart_id_list'][bb]);
			        }
			      }
			      // console.log('cart_id_list的值',r);
			      // console.log('e的值',e);
			      // console.log('rr的值',rr);
			      uni.request({
			        url: t.order.gyzj_submit,
			        method: "post",
			        data: {
			          // mch_list: [],
					  mch_list:'',
			          // cart_id_list: JSON.stringify(c)
			          cart_id_list: JSON.stringify(rr),
					  mobile:arr.token,
					  type:arr.type
			        },
			        success: function (ta) {
						ta=ta.data;
						console.log('ta的值',ta);
			          if (0 == ta.code) {
			            me.urlToast('预算提交成功!','/pages/index/index',1000,0,1);
			          }else{
			            me.urlToast(ta.msg);
			          }
			        }
			      });
			    },
			 /*后端需要用到的 */
			  getCartList: function () {
			    var i = this;
				 var arr = this.main_getGlobal(); 
			    uni.showNavigationBarLoading(), i.show_no_data_tip= !1;
			      i.loading=!0, uni.request({
			      url: t.cart.list,
				  data:{
					  mobile:arr.token,
					  type:arr.type
				  },
			      success: function (ta) {
					  console.log('获取数据');
			        console.log(ta.data.data)
					ta=ta.data;
					if(0 == ta.code){ 
						i.cart_list=ta.data.list;
						  i.mch_list= ta.data.mch_list;
						  i.total_price= 0;
						  i.cart_check_all= !1;
						  i.show_cart_edit= !1;
					}
			     
					i.show_no_data_tip= 0 == i.cart_list.length;
			      },
			      complete: function () {
			        uni.hideNavigationBarLoading();
					 i.loading= !1;
			      }
			    });
			  }
			  
		},
	}
</script>

<style>
/* pages/shop_cart/shop_cart.wxss */

page {
  background: #f6f6f6;
}

/*checkbox 选项框大小  */

checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

/*checkbox选中后样式  */

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: linear-gradient(90deg, rgba(55, 138, 231, 1), rgba(60, 115, 203, 1));
}

/*checkbox选中后图标样式  */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

/* 顶部背景 */

.bg-container {
  width: 100%;
  height: 430rpx;
  position:relative;
  padding-left:28rpx;
}

.bg-text {
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

/* 商品列表 */

.list-scroll {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.goods-container {
  background: rgba(255, 255, 255, 1);
  border-radius: 10rpx;
  overflow: hidden;
  margin: 15rpx 28rpx 150rpx;

}

.goods-list-content {
  position: relative;
}

.goods-list {
  width: 100%;
  padding: 34rpx 18rpx;
  -webkit-transform: translateX(110rpx);
  transform: translateX(110rpx);
  margin-left: -110rpx;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: #fff;
  border-bottom: 1rpx solid #f6f6f6;
}

.goods-list:nth-last-of-type(1) {
  border-bottom: none;
}

.list-image {
  width: 202rpx;
  height: 170rpx;
  border-radius: 6rpx;
  overflow: hidden;
}

.list-image image {
  max-height: 100%;
}

.goods-content {
  flex: 1;
  padding-left: 14rpx;
}

.goods-detail {
  flex: 1;
  height: 170rpx;
  padding-left: 20rpx;
}

.goods-title {
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 40rpx;
  height: 80rpx;
}

.goods-text {
  font-size: 22rpx;
  color: rgba(153, 153, 153, 1);
  max-width: 350rpx;
}

.price-left text:nth-of-type(1) {
  font-size: 22rpx;
  color: #333;
}

.price-left text:nth-of-type(2) {
  font-size: 30rpx;
  color: #333;
}

.del-btn {
  position: absolute;
  right: 10rpx;
  top: 34rpx;
  bottom: 34rpx;
  z-index: 1;
  width: 100rpx;
  background: linear-gradient(90deg, rgba(55, 138, 231, 1), rgba(60, 115, 203, 1));
  border-radius: 10rpx;
}

.del-btn image {
  width: 33rpx;
  height: 32rpx;
}

/* 移动动画 */

.touch-move-active {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.reduce-btn {
  width: 64rpx !important;
  height: 32rpx !important;
  line-height: 32rpx !important;
  background: rgba(255, 255, 255, 0) !important;
  font-size: 32rpx !important;
  color: #848484 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.van-stepper__minus--disabled {
  color: #ccc !important;
}

.add-btn {
  width: 64rpx !important;
  height: 32rpx !important;
  line-height: 32rpx !important;
  background: rgba(255, 255, 255, 0) !important;
  font-size: 32rpx !important;
  color: #848484 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.van-stepper__plus--disabled {
  color: #ccc !important;
}

.num-text {
  width: 64rpx !important;
  height: 32rpx !important;
  line-height: 32rpx !important;
  background: #f6f7f8 !important;
  color: rgba(51, 51, 51, 1) !important;
  font-size: 26rpx !important;
  padding: 0 2rpx !important;
}

/* 合计 */

.total-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30rpx;
  width: 694rpx;
  height: 102rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 10rpx;
  padding: 0 18rpx;
  z-index: 3
}

.all-lable text {
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  margin: 0 30rpx 0 14rpx;
}

.total-price text:nth-of-type(1) {
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
}

.total-price text:nth-of-type(2) {
  font-size: 22rpx;
  color: #ec1c24;
}

.total-price text:nth-of-type(3) {
  font-size: 30rpx;
  color: #ec1c24;
}

.submit-btn {
  width:280rpx;
  height: 64rpx;
  background: linear-gradient(135deg, rgba(255, 81, 51, 1), rgba(248, 40, 37, 1));
  box-shadow: 0px 3rpx 9rpx 0px rgba(248, 37, 40, 0.35);
  border-radius: 32rpx;
  margin: 0;
  padding: 0 26rpx;
}

.submit-btn text:nth-of-type(1) {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}

.submit-btn text:nth-of-type(2) {
  min-width: 38rpx;
  height: 38rpx;
  background: rgba(255, 215, 210, 1);
  border-radius: 50%;
  margin-left: 6rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(236, 28, 36, 1);
  display: inline-block;
  text-align: center;
  line-height: 38rpx;
  padding: 0 10rpx;
}

.submit-btn .max-num {
  border-radius: 20rpx !important;
}
/*回到之前的操作*/
.back-image {
  position:absolute;
  left:28rpx;
  top:86rpx;
  width: 17rpx;
  height: 29rpx;
  /* margin-right:auto; */
}
.back{
  width: 250rpx;

}
/*新增分类样式*/
.list-title{
  display: flex;
  align-items: center;
  padding: 40rpx 0 36rpx 20rpx;
}
.shop-name {
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  margin-left: 20rpx;
}
.shop-image {
  width: 36rpx;
  height: 32rpx;
}
.shop-jiantou {
  width: 12rpx;
  height: 20rpx;
  margin-left: 20rpx;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex {
    display: flex;
    align-items: center;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
button::after {
    content: " ";
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 10px;
}

</style>
